<template>
	<view class="content">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<!-- f1:自定义导航栏 -->
		<uni-nav-bar
			class="nav-bar"
			title="缴费"
			left-icon="back"
			left-text="返回"
			right-icon="list"
			background-color="#090"
			color="#fff"
			@clickLeft="back"
			@clickRight="jump('/pages/feeRecord/feeRecord')"
		></uni-nav-bar>
		<!-- F2：累积费用统计 -->
		<view class="fee-statistics">
			<text class="hint">当前待缴费用(元)</text>
			<text class="amount">￥{{ amount }}</text>
		</view>
		<!-- f3:费用列表 -->
		<uni-list>
			<uni-list-item
				title="水费"
				thumb="../../static/img/shui.png"
				thumbSize="lg"
				link
				:rightText="fees.shui >= 0 ? '' : `待缴:￥${Math.abs(fees.shui)}`"
				to="/pages/feePay/feePay?type=1"
			/>
			<uni-list-item
				title="电费"
				thumb="../../static/img/dian.png"
				thumbSize="lg"
				link
				:rightText="fees.dian >= 0 ? '' : `待缴:￥${Math.abs(fees.dian)}`"
				to="/pages/feePay/feePay?type=2"
			/>
			<uni-list-item
				title="燃气费"
				thumb="../../static/img/ranqi.png"
				thumbSize="lg"
				link
				:rightText="fees.ranqi >= 0 ? '' : `待缴:￥${Math.abs(fees.ranqi)}`"
				to="/pages/feePay/feePay?type=3"
			/>
			<uni-list-item
				title="物业费"
				thumb="../../static/img/wuye.png"
				thumbSize="lg"
				link
				:rightText="fees.wuye >= 0 ? '' : `待缴:￥${Math.abs(fees.wuye)}`"
				to="/pages/feePay/feePay?type=4"
			/>
			<uni-list-item
				title="停车费"
				thumb="../../static/img/tingche.png"
				thumbSize="lg"
				link
				:rightText="fees.tingche >= 0 ? '' : `待缴:￥${Math.abs(fees.tingche)}`"
				to="/pages/feePay/feePay?type=5"
			/>
			<uni-list-item
				title="宽带费"
				thumb="../../static/img/kuandai.png"
				thumbSize="lg"
				link
				:rightText="fees.kuandai >= 0 ? '' : `待缴:￥${Math.abs(fees.kuandai)}`"
				to="/pages/feePay/feePay?type=6"
			/>
		</uni-list>
	</view>
</template>

<script>
import { feeList } from '../../service/index.js';
export default {
	data() {
		return {
			fees: {},
			statusBarHeight: ''
		};
	},
	computed: {
		amount() {
			let sum = 0;
			sum = this.fees.shui < 0 ? sum + this.fees.shui : sum;
			sum = this.fees.dian < 0 ? sum + this.fees.dian : sum;
			sum = this.fees.ranqi < 0 ? sum + this.fees.ranqi : sum;
			sum = this.fees.wuye < 0 ? sum + this.fees.wuye : sum;
			sum = this.fees.tingche < 0 ? sum + this.fees.tingche : sum;
			sum = this.fees.kuandai < 0 ? sum + this.fees.kuandai : sum;
			return Math.abs(sum).toFixed(2);
		}
	},
	async onLoad() {
		let fees = await feeList();
		this.fees = fees;
	},
	methods: {
		back() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		jump(url) {
			// console.log(url);
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: $zh-theme-color;
}
.nav-bar {
	display: block;

	::v-deep .uni-navbar__content {
		display: block;
	}
}

.fee-statistics {
	background-color: $zh-theme-color;
	border-top: $uni-border;
	padding: $uni-spacing-col-lg * 3 0;
	flex-direction: column;
	align-items: center;
	color: $uni-text-color-inverse;

	.hint {
		font-size: $uni-font-size-lg;
		margin-bottom: $uni-spacing-col-base;
	}

	.amount {
		font-size: $uni-font-size-base * 2;
		font-weight: bold;
	}
}
::v-deep .uni-list-item__extra-text {
	color: red;
	font-size: $uni-font-size-base;
}
</style>
